import React from 'react';

export interface ActivityItemProps {
  user: string;
  action: string;
  target: string;
  time: string;
  avatar?: string;
}

export const ActivityItem: React.FC<ActivityItemProps> = ({ 
  user, 
  action, 
  target, 
  time, 
  avatar 
}) => (
  <div className="flex items-start space-x-3">
    <div className="h-10 w-10 rounded-full bg-warm-light/20 flex items-center justify-center flex-shrink-0">
      {avatar ? (
        <img src={avatar} alt={user} className="h-10 w-10 rounded-full" />
      ) : (
        <span className="text-warm-DEFAULT">{user[0].toUpperCase()}</span>
      )}
    </div>
    <div className="flex-1 min-w-0">
      <p className="text-sm text-gray-800">
        <span className="font-medium text-warm-dark">{user}</span>
        <span className="text-gray-600"> {action} </span>
        <span className="font-medium text-warm-dark">{target}</span>
      </p>
      <p className="text-xs text-gray-500 mt-0.5">{time}</p>
    </div>
  </div>
); 